<?php
    session_start();
    $connect = mysqli_connect('localhost','root','root','db_info');
    $query = mysqli_query($connect,"select * from tb_article");
    $list = [];
    while($result = mysqli_fetch_assoc($query)){
        $list[] = $result;
    }
//    print_r($list)
?>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/loginLayout.css">
    <link rel="stylesheet" href="./css/footer.css">
    <style>
        body{
            background-color: #000;
        }
        .innerA{
            margin: 90px auto 0;
            color: #fff;
            padding: 25px;
        }
        .hide{
            top: -45px;
        }
        .infoList{
            width: 100%;
            color: #fff;
            text-decoration: none;
            padding: 40px 10px;
            display: block;
            border-bottom: 1px solid #fff;
            transition: 1s;
        }
        .infoList:hover{
            color: #76B900;
        }
        .artTitle{
            margin: 20px;
            font-weight: bold;
            font-size: 30px;
        }
        .introduction{
            margin-left: 20px;
        }
    </style>
</head>
<body>
<?php include_once 'header.php'?>
<main>
    <div class="innerA container clearfix">
        <?php
            for($i = 0;$i < count($list);$i++){
        ?>

        <a href="info.php?id=<?php echo $list[$i]['id']?>" class="infoList clearfix">
            <div class="artTitle">
                <?php echo $list[$i]['title'];?>
            </div>
            <div class="introduction qudiao">
                <?php echo substr($list[$i]['text'],0,150)."...";?>
            </div>
        </a>
            <?php } ?>
    </div>
</main>
<?php include_once 'footer.php'?>
<?php include_once 'loginLayout.php';?>
</body>
<script src="./js/jquery-3.5.1.js"></script>
<script src="./js/header.js"></script>
<script src="./js/tools.js"></script>
<script type="text/javascript">
    $(function(){
        let list = $(".qudiao");//获取class所有元素
        for(let i = 0 ; i< list.length ; i ++ ){
            let s = $(list[i]).text();//获取里面的博客摘要内容
            let dd=s.replace(/<[^>]+>/g,"");//截取html标签
            let dds=dd.replace(/&nbsp;/ig,"");//截取空格等特殊标签

            $(list[i]).text("");//清空里面内容
            $(list[i]).text(dds.substring(0,200))//截取200个字符
        }
    })
</script>
</html>